<template>
  <div class="login-container">
    <div class="login-content">
      <!-- 装饰元素 -->
      <div class="decoration-circle circle-1"></div>
      <div class="decoration-circle circle-2"></div>
      <div class="decoration-square"></div>
      <div class="decoration-dots"></div>
      
      <div class="login-box">
        <div class="brand-logo">
          <img src="" alt="AI绘画平台" onerror="this.src='https://via.placeholder.com/60x60?text=AI';this.onerror='';" />
          <h1 class="brand-name">AI绘画平台</h1>
        </div>
        
        <h2 class="login-title">欢迎回来</h2>
        <p class="login-subtitle">登录您的账号以继续使用平台</p>
        
        <!-- 开发者工具 -->
        <div class="dev-tools" v-if="debug">
          <el-collapse>
            <el-collapse-item title="开发者选项" name="1">
              <el-form>
                <el-form-item label="API基础路径" class="mb-3">
                  <el-input v-model="apiBase" placeholder="例如: http://localhost:3000" size="large" class="dev-input">
                    <template #append>
                      <el-button @click="testApiBase" :icon="Check">测试</el-button>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="登录API路径" class="mb-3">
                  <div class="flex">
                    <el-select v-model="loginPath" placeholder="选择API路径" size="large" class="flex-1">
                      <el-option
                        v-for="(path, index) in loginApiPaths"
                        :key="index"
                        :label="path.replace(apiBase, '')"
                        :value="path"
                      />
                    </el-select>
                    <el-button type="primary" size="large" class="ml-2" @click="addCustomPath" :icon="Plus">添加</el-button>
                  </div>
                </el-form-item>
                <el-form-item v-if="lastError" class="mb-3">
                  <pre class="error-display">{{ lastError }}</pre>
                </el-form-item>
              </el-form>
            </el-collapse-item>
          </el-collapse>
        </div>
        
        <!-- 登录方式选项卡 -->
        <el-tabs v-model="activeTab" class="login-tabs" type="card">
          <el-tab-pane label="账号密码登录" name="account">
            <transition name="fade-slide" mode="out-in">
              <el-form :model="accountForm" :rules="accountRules" ref="accountFormRef" class="login-form" @keyup.enter="handleAccountLogin">
                <el-form-item prop="username" class="form-item">
                  <el-input 
                    v-model="accountForm.username" 
                    placeholder="用户名/邮箱" 
                    size="large"
                    :prefix-icon="User"
                    class="form-input"
                  />
                </el-form-item>
                
                <el-form-item prop="password" class="form-item">
                  <el-input 
                    v-model="accountForm.password" 
                    type="password" 
                    placeholder="密码" 
                    show-password
                    size="large"
                    :prefix-icon="Lock"
                    class="form-input"
                  />
                </el-form-item>
                
                <div class="remember-forgot">
                  <el-checkbox v-model="rememberMe">记住我</el-checkbox>
                  <a href="javascript:;" @click="showForgotPassword = true" class="forgot-password-link">忘记密码?</a>
                </div>
                
                <el-form-item class="form-item">
                  <el-button 
                    type="primary" 
                    class="login-button" 
                    @click="handleAccountLogin" 
                    :loading="loading"
                    size="large"
                    round
                  >
                    <span class="button-text">登录</span>
                    <i class="el-icon-right" v-if="!loading"></i>
                  </el-button>
                </el-form-item>
              </el-form>
            </transition>
          </el-tab-pane>
          
          <el-tab-pane label="手机号登录" name="phone">
            <transition name="fade-slide" mode="out-in">
              <el-form :model="phoneForm" :rules="phoneRules" ref="phoneFormRef" class="login-form" @keyup.enter="handlePhoneLogin">
                <el-form-item prop="phone" class="form-item">
                  <el-input 
                    v-model="phoneForm.phone" 
                    placeholder="手机号" 
                    size="large"
                    :prefix-icon="Phone"
                    class="form-input"
                  />
                </el-form-item>
                
                <el-form-item prop="smsCode" class="form-item">
                  <div class="sms-code-input">
                    <el-input 
                      v-model="phoneForm.smsCode" 
                      placeholder="验证码" 
                      size="large"
                      :prefix-icon="Message"
                      class="form-input"
                    />
                    <el-button 
                      type="primary" 
                      :disabled="smsButtonDisabled" 
                      @click="handleSendSmsCode"
                      class="sms-button"
                      size="large"
                    >
                      {{ smsButtonText }}
                    </el-button>
                  </div>
                </el-form-item>
                
                <el-form-item class="form-item">
                  <el-button 
                    type="primary" 
                    class="login-button" 
                    @click="handlePhoneLogin" 
                    :loading="loading"
                    size="large"
                    round
                  >
                    <span class="button-text">登录</span>
                    <i class="el-icon-right" v-if="!loading"></i>
                  </el-button>
                </el-form-item>
              </el-form>
            </transition>
          </el-tab-pane>
          
          <el-tab-pane label="微信扫码登录" name="wechat">
            <transition name="fade-slide" mode="out-in">
              <div class="wechat-login-container">
                <div class="qrcode-container" v-if="wechatQrCodeUrl">
                  <div class="qrcode-wrapper">
                    <img :src="wechatQrCodeUrl" alt="微信二维码" class="qrcode-image" />
                    <div class="qrcode-overlay">
                      <i class="el-icon-refresh"></i>
                      <span>点击刷新</span>
                    </div>
                  </div>
                  <p class="qrcode-tip">请使用微信扫一扫登录</p>
                  <p class="qrcode-subtitle">扫码后请在微信中确认登录</p>
                </div>
                <div v-else class="qrcode-loading">
                  <div class="loading-spinner">
                    <el-icon class="is-loading"><Loading /></el-icon>
                  </div>
                  <p>正在加载二维码...</p>
                </div>
              </div>
            </transition>
          </el-tab-pane>
        </el-tabs>
        
        <!-- 社交媒体登录 -->
        <div class="social-login">
          <p class="social-divider"><span>或使用其他方式登录</span></p>
          <div class="social-icons">
            <button class="social-icon" title="GitHub登录">
              <i class="fab fa-github"></i>
            </button>
            <button class="social-icon" title="QQ登录">
              <i class="fab fa-qq"></i>
            </button>
            <button class="social-icon" title="微博登录">
              <i class="fab fa-weibo"></i>
            </button>
          </div>
        </div>
        
        <div class="login-footer">
          <p>还没有账号？<router-link to="/register" class="register-link">立即注册</router-link></p>
        </div>
      </div>
      
      <div class="powered-by">
        Powered by <span class="highlight">AI绘画平台</span> © {{ new Date().getFullYear() }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { User, Lock, Phone, Message, Loading, Check, Plus } from '@element-plus/icons-vue';
import { useUserStore } from '@/stores/user';
import axios from 'axios';

const router = useRouter();
const route = useRoute();
const userStore = useUserStore();
const loading = ref(false);
const activeTab = ref('account');
const rememberMe = ref(false);
const showForgotPassword = ref(false);

// 开发者调试相关
const debug = ref(process.env.NODE_ENV === 'development');
const apiBase = ref('http://localhost:3000');
const loginApiPaths = ref([
  `${apiBase.value}/api/auth/login`,
  `${apiBase.value}/auth/login`,
  `${apiBase.value}/api/v1/auth/login`,
  `${apiBase.value}/api/auth/signin`,
  `${apiBase.value}/api/users/login`
]);
const loginPath = ref(loginApiPaths.value[0]);
const lastError = ref('');

// 添加自定义API路径
const addCustomPath = () => {
  const customPath = prompt('请输入自定义API路径', `${apiBase.value}/api/custom/login`);
  if (customPath && !loginApiPaths.value.includes(customPath)) {
    loginApiPaths.value.push(customPath);
    loginPath.value = customPath;
  }
};

// 测试API基础路径
const testApiBase = async () => {
  try {
    const response = await axios.get(`${apiBase.value}/api/health`, { timeout: 3000 });
    ElMessage.success(`连接成功: ${response.status}`);
  } catch (error) {
    if (error.response) {
      ElMessage.warning(`服务器响应: ${error.response.status}`);
    } else {
      ElMessage.error('连接失败');
    }
  }
};

// 账号密码登录表单
const accountFormRef = ref(null);
const accountForm = reactive({
  username: '',
  password: ''
});
const accountRules = {
  username: [{ required: true, message: '请输入用户名或邮箱', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
};

// 手机号登录表单
const phoneFormRef = ref(null);
const phoneForm = reactive({
  phone: '',
  smsCode: ''
});
const phoneRules = {
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
  ],
  smsCode: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { pattern: /^\d{6}$/, message: '验证码为6位数字', trigger: 'blur' }
  ]
};

// 短信验证码
const smsButtonText = ref('获取验证码');
const smsButtonDisabled = ref(false);
const smsCountdown = ref(0);
let smsTimer = null;

// 微信登录
const wechatQrCodeUrl = ref('');

// 监听标签页切换
watch(activeTab, (newVal) => {
  if (newVal === 'wechat' && !wechatQrCodeUrl.value) {
    fetchWechatQrCode();
  }
});

// 组件挂载时
onMounted(() => {
  // 如果默认是微信登录标签，获取二维码
  if (activeTab.value === 'wechat') {
    fetchWechatQrCode();
  }
});

// 账号密码登录
const handleAccountLogin = async () => {
  if (!accountFormRef.value) return;
  
  try {
    await accountFormRef.value.validate(async (valid) => {
      if (!valid) return;
      
      try {
        loading.value = true;
        lastError.value = '';
        
        // 如果选择了特定路径，就直接发送请求，而不经过store
        if (loginPath.value && debug.value) {
          console.log(`使用自定义登录路径: ${loginPath.value}`);
          try {
            const response = await axios({
              method: 'post',
              url: loginPath.value,
              data: {
                username: accountForm.username,
                password: accountForm.password,
                login_type: 'username'
              },
              headers: {
                'Content-Type': 'application/json'
              }
            });
            
            console.log('登录响应:', response);
            
            // 检查响应格式，适配不同的API返回格式
            const responseData = response.data;
            let authData;
            
            if (responseData.success && responseData.data) {
              // 标准格式：{ success: true, data: { token, user } }
              authData = {
                token: responseData.data.token,
                user: responseData.data.user
              };
            } else {
              // 简单格式：{ token, user }
              authData = {
                token: responseData.token || responseData.access_token,
                user: responseData.user || responseData.userInfo
              };
            }
            
            // 使用store的setAuth方法设置认证信息
            userStore.setAuth(authData);
            
            ElMessage.success('登录成功');
            
            // 登录成功后跳转
            const redirect = route.query.redirect?.toString() || '/';
            router.push(redirect);
          } catch (err) {
            console.error('自定义路径登录失败:', err);
            lastError.value = JSON.stringify(err.response?.data || err, null, 2);
            throw err;
          }
        } else {
          // 使用store中的login方法
          await userStore.login({
            username: accountForm.username,
            password: accountForm.password,
            login_type: 'username'
          });
          
          // 登录成功后跳转
          const redirect = route.query.redirect?.toString() || '/';
          router.push(redirect);
        }
      } catch (error) {
        console.error('登录失败:', error);
        if (error.response?.data) {
          lastError.value = JSON.stringify(error.response.data, null, 2);
        }
      } finally {
        loading.value = false;
      }
    });
  } catch (e) {
    console.error('表单验证失败:', e);
    loading.value = false;
  }
};

// 手机号登录
const handlePhoneLogin = async () => {
  if (!phoneFormRef.value) return;
  
  await phoneFormRef.value.validate(async (valid) => {
    if (!valid) return;
    
    try {
      loading.value = true;
      await userStore.login({
        phone: phoneForm.phone,
        sms_code: phoneForm.smsCode,
        login_type: 'phone'
      });
      
      // 登录成功后跳转
      const redirect = route.query.redirect?.toString() || '/';
      router.push(redirect);
    } catch (error) {
      console.error('登录失败:', error);
    } finally {
      loading.value = false;
    }
  });
};

// 发送短信验证码
const handleSendSmsCode = async () => {
  if (!phoneForm.phone) {
    ElMessage.warning('请输入手机号');
    return;
  }
  
  if (!/^1[3-9]\d{9}$/.test(phoneForm.phone)) {
    ElMessage.warning('手机号格式不正确');
    return;
  }
  
  try {
    smsButtonDisabled.value = true;
    await axios.post('/api/auth/send-sms-code', { phone: phoneForm.phone });
    ElMessage.success('验证码发送成功');
    startSmsCountdown();
  } catch (error: any) {
    ElMessage.error(error.response?.data?.message || '验证码发送失败');
    smsButtonDisabled.value = false;
  }
};

// 开始短信倒计时
const startSmsCountdown = () => {
  smsCountdown.value = 60;
  smsButtonText.value = `${smsCountdown.value}秒后重新获取`;
  
  clearInterval(smsTimer);
  smsTimer = setInterval(() => {
    smsCountdown.value--;
    smsButtonText.value = `${smsCountdown.value}秒后重新获取`;
    
    if (smsCountdown.value <= 0) {
      clearInterval(smsTimer);
      smsButtonText.value = '获取验证码';
      smsButtonDisabled.value = false;
    }
  }, 1000);
};

// 获取微信登录二维码
const fetchWechatQrCode = async () => {
  try {
    // 使用auth控制器的获取微信登录URL路径
    const response = await axios.get('/api/auth/wechat-login-url');
    const url = response.data.url || response.data.data?.url;
    
    if (url) {
      // 在实际项目中，这里应该将URL转换为二维码图片
      wechatQrCodeUrl.value = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(url)}`;
      
      // 开始轮询检查微信登录状态
      startWechatLoginCheck();
    } else {
      ElMessage.error('获取微信登录二维码失败');
    }
  } catch (error: any) {
    ElMessage.error(error.response?.data?.message || '获取微信登录二维码失败');
  }
};

// 开始轮询检查微信登录状态
const startWechatLoginCheck = () => {
  // 在实际项目中，这里应该实现轮询检查微信登录状态
  // 由于这是一个演示，我们不实现实际的轮询逻辑
  console.log('开始检查微信登录状态');
};
</script>

<style scoped>
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #f6f9fc 0%, #dfe9f3 100%);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.login-content {
  width: 100%;
  max-width: 480px;
  perspective: 1000px;
  position: relative;
  z-index: 2;
}

.login-box {
  width: 100%;
  padding: 40px;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  animation: fadeIn 0.6s ease-out;
  position: relative;
  overflow: hidden;
}

.login-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3498db, #8e44ad, #3498db);
  background-size: 200% 200%;
  animation: gradientAnimation 2s ease infinite;
}

@keyframes gradientAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 装饰元素 */
.decoration-circle {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
}

.circle-1 {
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, rgba(66, 133, 244, 0.2), rgba(219, 68, 55, 0.2));
  top: -150px;
  left: -150px;
  animation: float 8s ease-in-out infinite;
}

.circle-2 {
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, rgba(15, 157, 88, 0.2), rgba(244, 180, 0, 0.2));
  bottom: -100px;
  right: -100px;
  animation: float 6s ease-in-out infinite 1s;
}

.decoration-square {
  position: absolute;
  width: 100px;
  height: 100px;
  background: rgba(66, 133, 244, 0.1);
  transform: rotate(45deg);
  top: 20%;
  right: 15%;
  animation: rotate 15s linear infinite;
}

.decoration-dots {
  position: absolute;
  width: 180px;
  height: 180px;
  background-image: radial-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
  background-size: 15px 15px;
  bottom: 10%;
  left: 10%;
  opacity: 0.5;
  animation: float 5s ease-in-out infinite 0.5s;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

@keyframes rotate {
  0% { transform: rotate(45deg); }
  100% { transform: rotate(405deg); }
}

.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.brand-logo img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  margin-right: 10px;
}

.brand-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
  background: linear-gradient(90deg, #3498db, #8e44ad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-title {
  text-align: center;
  margin-bottom: 10px;
  color: #303133;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.login-subtitle {
  text-align: center;
  color: #909399;
  font-size: 15px;
  margin-bottom: 25px;
}

.login-tabs {
  margin-bottom: 20px;
}

.login-tabs :deep(.el-tabs__nav) {
  width: 100%;
  display: flex;
}

.login-tabs :deep(.el-tabs__item) {
  flex: 1;
  text-align: center;
  font-size: 15px;
  padding: 16px 0;
  transition: all 0.3s ease;
}

.login-tabs :deep(.el-tabs__item.is-active) {
  color: #3498db;
  font-weight: 500;
}

.login-tabs :deep(.el-tabs__active-bar) {
  background-color: #3498db;
  height: 3px;
  border-radius: 3px;
}

.login-form {
  margin-top: 25px;
}

.form-item {
  margin-bottom: 24px;
}

.form-input {
  font-size: 15px;
}

.form-input :deep(.el-input__wrapper) {
  padding: 1px 15px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  transition: all 0.3s ease;
  height: 50px;
}

.form-input :deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #3498db;
}

.form-input :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.3);
}

.form-input :deep(.el-input__inner) {
  font-size: 15px;
  height: 100%;
}

.form-input :deep(.el-input__prefix) {
  color: #909399;
}

.remember-forgot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.login-button {
  width: 100%;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  background: linear-gradient(90deg, #3498db, #2980b9);
  border: none;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(52, 152, 219, 0.35);
  background: linear-gradient(90deg, #3498db, #2574a9);
}

.button-text {
  margin-right: 8px;
}

.login-footer {
  margin-top: 30px;
  text-align: center;
  color: #606266;
  font-size: 15px;
}

.login-footer a {
  color: #3498db;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

.login-footer a:hover {
  color: #2980b9;
  text-decoration: underline;
}

.sms-code-input {
  display: flex;
  gap: 12px;
}

.sms-button {
  flex-shrink: 0;
  width: 130px;
  white-space: nowrap;
  font-size: 14px;
  border-radius: 12px;
  background: linear-gradient(90deg, #3498db, #2980b9);
  border: none;
}

.sms-button:hover:not(:disabled) {
  background: linear-gradient(90deg, #3498db, #2574a9);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.wechat-login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 35px 0;
}

.qrcode-container {
  text-align: center;
}

.qrcode-wrapper {
  background: #fff;
  padding: 15px;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  display: inline-block;
  margin-bottom: 20px;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
}

.qrcode-wrapper:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.qrcode-wrapper:hover .qrcode-overlay {
  opacity: 1;
}

.qrcode-image {
  width: 200px;
  height: 200px;
  border-radius: 8px;
}

.qrcode-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(52, 152, 219, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 16px;
}

.qrcode-overlay i {
  font-size: 36px;
  margin-bottom: 8px;
}

.qrcode-tip {
  color: #606266;
  font-size: 16px;
  font-weight: 500;
  margin: 5px 0;
}

.qrcode-subtitle {
  color: #909399;
  font-size: 14px;
}

.qrcode-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #909399;
  padding: 60px 0;
}

.loading-spinner {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.qrcode-loading .el-icon {
  font-size: 48px;
  color: #3498db;
}

/* 社交媒体登录 */
.social-login {
  margin-top: 30px;
}

.social-divider {
  text-align: center;
  position: relative;
  color: #909399;
  font-size: 14px;
  margin: 20px 0;
}

.social-divider::before,
.social-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 70px);
  height: 1px;
  background-color: #ebeef5;
}

.social-divider::before {
  left: 0;
}

.social-divider::after {
  right: 0;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.social-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #ebeef5;
  color: #606266;
  font-size: 20px;
}

.social-icon:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  color: #3498db;
  border-color: #3498db;
}

.social-icon i {
  transition: all 0.3s ease;
}

.forgot-password-link {
  color: #909399;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s ease;
}

.forgot-password-link:hover {
  color: #3498db;
  text-decoration: underline;
}

/* 过渡动画 */
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.3s ease;
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(20px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}

.powered-by {
  text-align: center;
  margin-top: 20px;
  color: #909399;
  font-size: 14px;
}

.highlight {
  color: #3498db;
  font-weight: 500;
}

/* 开发者工具样式 */
.dev-tools {
  margin-bottom: 25px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e4e7ed;
}

.dev-tools .el-collapse {
  border: none;
}

.dev-tools :deep(.el-collapse-item__header) {
  padding: 12px 15px;
  background-color: #f8fafc;
  font-weight: 600;
  font-size: 14px;
  color: #3498db;
}

.dev-tools :deep(.el-collapse-item__content) {
  padding: 15px;
}

.error-display {
  background-color: #f8f8f8;
  padding: 12px;
  border-radius: 8px;
  margin-top: 15px;
  overflow-x: auto;
  font-size: 13px;
  border: 1px solid #ebeef5;
  color: #e6a23c;
}

.mb-3 {
  margin-bottom: 16px;
}

.ml-2 {
  margin-left: 10px;
}

.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

/* 响应式设计 */
@media (max-width: 576px) {
  .login-box {
    padding: 30px 20px;
  }
  
  .login-title {
    font-size: 22px;
    margin-bottom: 8px;
  }
  
  .sms-button {
    width: 110px;
    font-size: 13px;
  }
  
  .qrcode-image {
    width: 180px;
    height: 180px;
  }
  
  .login-tabs :deep(.el-tabs__item) {
    font-size: 14px;
    padding: 12px 0;
  }

  .circle-1 {
    width: 200px;
    height: 200px;
    top: -100px;
    left: -100px;
  }

  .circle-2 {
    width: 150px;
    height: 150px;
    bottom: -75px;
    right: -75px;
  }

  .decoration-square {
    width: 60px;
    height: 60px;
  }

  .decoration-dots {
    width: 120px;
    height: 120px;
    background-size: 10px 10px;
  }
}
</style> 